<template>
  <div class="root">
    <div class="top">
      <router-link to="/">
        <div class="iconfont top-left">&#xe624;</div>
      </router-link>
      <div class="top-right">城市选择</div>
    </div>
    <div class="bottom">
      <div class="bottom-left"
           :class="{active: isActive}"
           @click="clickHander(true)"
       >境内</div>
      <div class="bottom-right"
           :class="{active: !isActive}"
           @click="clickHander(false)"
       >境外·港澳台</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CityHeader',
  data () {
    return {
      isActive: true
    }
  },
  methods: {
    clickHander (val) {
      this.isActive = val
    }
  },
  watch: {
    isActive () {
      let area = this.isActive ? 'china' : 'abroad'
      this.bus.$emit('area-change', area)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/variables.styl'
.root
  position: relative
  margin: 0
  padding: 0
  height: 1.48rem
  background: $bgColor
  color: #fff
  .top
    display: flex
    height: .88rem
    line-height: .88rem
    text-align: center
    .top-left
      width: .8rem
      font-size: .36rem
      font-weight: bold
      margin-right: .2rem
      color: #fff
    .top-right
      flex: 1
      font-size: .32rem
      margin-right: 1rem
  .bottom
    display: flex
    height: .4rem
    line-height: .4rem
    margin-left: 1rem
    margin-right: 1rem
    text-align: center
    border: .02rem solid #fff
    border-radius: .02rem
    .bottom-left
      flex: 1
    .bottom-right
      flex: 1
    .active
      background: #fff
      color: $bgColor
</style>
